<template>
  <div>
    <el-card class="box-card">
      <!-- 表单区域 -->
       <el-form :inline="true"  ref="form" class="demo-form-inline">
        <el-form-item label="关键字" class="item-left" size="small">
          <el-input v-model="queryData.keyword" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button size="small" @click="clearTopicList">清除</el-button>
          <el-button size="small" type="primary" @click="getTopicList">搜索</el-button>
        </el-form-item>
      </el-form>

      <!-- 消息提示 -->
       <el-form-item>
         <el-alert
       class="alert"
          title="数据一共{{}}条"
          type="info"
          show-icon>
        </el-alert>
       </el-form-item>
      <!-- 表格区域 -->
      <el-table :data="questionslist" stripe style="width: 100%">
          <el-table-column prop="id" label="编号" width="200">
          </el-table-column>
           <el-table-column
            prop="questionType"
            label="题型"
            >
          </el-table-column>
           <el-table-column
            prop="id"
            label="题目编号"
            >
          </el-table-column>
           <el-table-column
            prop="addTime"
            label="录入时间"
            >
          </el-table-column>

          <el-table-column
            prop="totalSeconds"
            label="答题时间(S)"
            >
          </el-table-column>
          <el-table-column
            prop="accuracyRate"
            label="正确率(%)"
            >
          </el-table-column>
          <el-table-column
            prop="userName"
            label="录入人"
            >
          </el-table-column>

          <el-table-column
            prop="address"
            label="操作"
            width="140"
            >
             <!-- 编辑 -->
          <template slot-scope="scope">
            <el-button  @click="removeQuestions(scope.row)" type="danger text" plain icon="el-icon-delete" size="mini"></el-button>
          </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          class="el-pagination"
          style="float: right"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryData.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryData.pagesize"
          layout="sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-card>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
export default {
  name: 'questions',
  data () {
    return {
      // 获取过来的参数要放在data中就比较灵活，放在methods方便后面写搜索功能和分页
      queryData: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      questionslist: [],
      total: 0,
      username: [
        { required: true, message: '请输入目录名称', trigger: 'blur' }
      ]
    }
  },

  created () {
    this.getTopicList()
    // this.removeQuestions()
  },

  methods: {
    // 获取组题列表数据
    async getTopicList () {
      // 指向data里的queryData
      const { data: res } = await randoms(this.queryData)
      this.questionslist = res.items
      console.log(this.questionslist)
      this.total = res.counts
    },
    // 第二步传入newsize最新获取的页面
    handleSizeChange (newsize) {
      // 第三步最新获取的页码赋值给queryData.pagesize
      this.queryData.pagesize = newsize
      this.getTopicList()
    },
    handleCurrentChange (newpage) {
      this.queryData.page = newpage
      this.getTopicList()
    },
    // 点击删除
    removeQuestions (row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 点击了确定按钮
        await removeRandoms(row)
        this.$message.success('删除成功')
        this.getTopicList()
      }).catch(() => {
        // 点击了取消按钮
        this.$message('已取消删除')
      })
    },
    clearTopicList () {
      this.queryData.keyword = ''
      this.getTopicList()
    }
  }
}
</script>

<style scoped lang='less'>
.box-card {
margin-top: 10px;
margin-left: 10px;
.item-left{
  margin-left: 28px;
}
.alert {
  margin-bottom: 20px;
}
.el-pagination {
  margin: 20px 0;
  margin-bottom: 20px;
}
}
</style>
